<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="navbar.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'goal.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.min.css" />
	
  </head>
  
  <body class="body">
    <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">

	  <div class="row">

	
		<!-- 导入左侧部分 -->
		<jsp:include page="side.jsp">
			<jsp:param value="goal" name="tag"/>
		</jsp:include>

		
		<div class="span9">

			

			<!-- <div class="btn-group" style="float:right">

          		<a class="btn" href="#"><i class="icon-cog"></i>操作</a>

          		<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

          		<ul class="dropdown-menu">

            		<li><a href="goal.jspx?m=add"><i class="icon-plus"></i>添加新目标</a></li>

            		<li><a href="#"><i class="icon-zoom-in"></i>浏览所有任务</a></li>

          		</ul>

        	</div> -->
        	
        	<!--以下为双按钮连一起的写法 -->
				<div class="btn-group " style="float:right">
					<a class="btn btn-primary" href="#"><i class="icon-cog"></i>操作</a>
					
					<!--以下用来写下拉菜单的小箭头-->
					<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="goal.jspx?m=add"><i class="icon-plus"></i>添加新目标</a>
						</li>
						<li><a href=""><i class="icon-zoom-in"></i>浏览所有任务</a></li>
					</ul>
				</div>



			<div class="clear"></div>



			
			<c:forEach items="${requestScope.goalpage.result }" var="g">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:40px">

				<li class="active">

					<a href="goal.jspx?m=new&id=${g.goalId }"><i class="icon-th"></i>${g.goalName }</a>

				</li>

				<li style="float:right"><i class="icon-edit"></i><a href="goal.jspx?m=update&id=${g.goalId }" class="">编辑</a></li>

			</ul>

			<div class="wall" style="border:1px solid #ddd;padding:15px">

				<p>${g.desc}</p>

				<div class="progress progress-danger">

					<div class="bar" style="width:${g.goalRate}"><fmt:formatNumber  type="number" value="${g.goalRate}"></fmt:formatNumber>%</div>
				</div>

			</div>				
			</c:forEach>
			
			
			
				<!--以下是分页功能，在页面显示靠右时使用 pagination-right而不是pull-right -->
			    <div class="pagination pagination-right">
				    <ul>
				    	<c:choose>
					  		<c:when test="${requestScope.goalpage.pageNum == 1 }">
					  			 <li><a href="#">首页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?p=1">首页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.goalpage.pageNum == 1}">
					  			<li><a href="#">上一页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?p=${requestScope.goalpage.pageNum - 1 }">上一页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.goalpage.pageNum == requetScope.goalpage.totalPages }">
					  			<li><a href="#">下一页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?p=${requestScope.goalpage.pageNum + 1 }">下一页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.goalpage.pageNum == requestScope.goalpage.totalPages }">
					  			<li><a href="#">尾页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?p=${requestScope.goalpage.totalPages }">尾页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					   
					  
				    </ul>
				    </div>				

			

		</div>

	  </div>

	</div>
	
	
		<script type="text/javascript" src="styles/jquery/jquery.js"></script>
		<script type="text/javascript" src="styles/js/bootstrap.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				$('.dropdown-toggle').dropdown();			//产生下拉菜单
			});
		</script>
  </body>
</html>
